<template>
  <div>
    <el-row>
      <el-col :span="24">
        <dy-panel>
          <dy-panel-header title="文件管理">
            asdflajl
          </dy-panel-header>
          <el-row>
            <el-col :span="6">
              <dy-panel-body :border="0">
                <el-form>
                  <el-input placeholder="请输入类别名称" v-model="treeFilter"></el-input>
                </el-form>
                <el-row style="margin-top: 10px">
                  <el-tree
                    :data="treeList"
                    :props="treeProps"
                    :lazy="true"
                    :load="doLoadChildren"
                    @node-click="onSelectTreeEvent"
                    :filter-node-method="onTreeFilterNodeEvent"
                    class="filter-tree"
                    highlight-current
                    ref="tree"
                  >
                     <span class="custom-tree-node" slot-scope="{ node, data }">
                            <span>{{ node.label }}</span>
                            <span>
                            <span v-show="data.fileType=='directory'" style="display: inline-block">
                                   <el-upload
                                     class="upload-demo"
                                     :action="uploadPath"
                                     auto-upload="true"
                                     :limit="1"
                                     :before-upload="onBeforeUpload"
                                     :on-success="uploadSuccess"
                                     :show-file-list="false"
                                     name="uploadFormFile"
                                     :data="uploadData"
                                   >
                                        <el-link size="small" type="primary">上传</el-link>
                                      </el-upload>
                            </span>
                              <!--<el-link type="primary"-->
                              <!--size="mini"-->
                              <!--@click="() => append(data)">-->
                              <!--上传-->
                              <!--</el-link>-->
                            <span v-show="data.fileType!='directory'" style="display: inline-block">
                                <el-link
                                  type="primary"
                                  size="mini"
                                  @click="() => remove(node, data)">
                              删除
                            </el-link>
                            </span>
                            </span>
                      </span>
                  </el-tree>
                </el-row>
              </dy-panel-body>
            </el-col>
            <el-col :span="18">
              <dy-panel-body>
                <code-editor ref="codeEditor" currentTheme="idea-black" :codeText="codeText"
                             :toolbarShow="true"></code-editor>
              </dy-panel-body>
            </el-col>
          </el-row>
        </dy-panel>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import {DyPanel, DyPanelHeader} from '@/view/panel'
  import DyPanelBody from '@/view/panel/DyPanelBody'
  import cmsTbContentApi from '@/apis/cmsApp/cmsTbContentApi.js'
  import cmsResourceApi from '@/apis/cmsApp/cmsResourceApi.js'
  import DyPagination from '@/components/pagination/DyPagination.vue'
  import CodeEditor from '@/components/codeEditor/CodeEditor'
  import Config from '@/js/config.js'
  import HttpCode from '@/js/httpCode.js'

  export default {
    name: 'CmsLocalResourceEditor',
    components: {
      CodeEditor,
      DyPanelBody,
      DyPanel,
      DyPanelHeader,
      DyPagination
    },
    data () {
      return {
        uploadPath: Config.uploadURL,
        /**
         * 编辑弹出框
         */
        editModal: {
          formKey: 'CmsDatasourceUpdate',
          readOnly: false,
          data: {},
          visible: false
        },
        outModal: {
          formKey: 'CmsDatasourceUpdate',
          readOnly: false,
          data: {},
          visible: false
        },
        inputCaseModal: {
          inputCaseDialogVisible: false,
          inputCaseDialogText: '',
        },
        loading: true,
        /**
         * 查询参数
         */
        queryParam: {
          currentPage: 1,
          pageSize: 10
        },
        /**
         * 上方操作按钮
         */
        operateBtn: {
          addBtn: true,
          editBtn: false,
          delBtn: false,
          importBtn: true,
          exportBtn: true
        },
        selectFilePath: '',
        uploadData: {
          uploadPath: '',
        },
        /**
         * 已选中的行
         */
        selectRows: [],
        roleList: [],
        treeFilter: '',
        treeList: [],
        codeText: '',
        treeProps: {
          children: 'children',
          label: 'fileName'
        },
        tableTotal: 0,
        tableList: []
      }
    },
    created () {

      /**
       * 查询所有部门
       */
      // cmsResourceApi.selectList({}).then(msg => {
      //   this.treeList = msg.rows
      // })
    },

    methods: {
      onBeforeUpload (file) {
        console.log(this.selectFilePath)
      },
      /**
       * 编辑按钮事件处理
       */
      onEditBtnEvent () {
        if (this.selectRows.length != 1) {
          return
        }
        this.editModal.title = '产品编辑'
        this.editModal.readOnly = false
        this.editModal.data = this.selectRows[0]
        this.editModal.visible = true
      },
      /**
       * 编辑按钮事件处理
       */
      onOutRowEvent (readOnly, data) {
        this.outModal.title = `${data.apiCode}输出清单`
        this.outModal.readOnly = false
        this.outModal.data = this.cloneDeep(data)
        this.outModal.visible = true
      },
      /**
       * 新增按钮事件处理
       */
      onAddBtnEvent () {
        this.editModal.readOnly = false
        this.editModal.data = null
        this.editModal.visible = true
      },
      /**
       * 编辑某行事件处理
       * @param readOnly
       * @param data
       */
      onEditRowEvent (readOnly, data) {
        this.editModal.readOnly = false
        this.editModal.data = this.cloneDeep(data)
        this.editModal.visible = true
      },
      /**
       * 删除按钮
       * */
      onDelBtnEvent () {
        this.$confirm('您确认要删除选中的记录么？', '删除警告', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确认',
          cancelButtonText: '取消'
        })
          .then(() => {
            let ids = []
            for (let row of this.selectRows) {
              ids.push(row.id)
            }
            this.doDeleteList(ids)
          })
          .catch(action => {
            this.$message({
              type: 'info',
              message: '取消删除'
            })
          })
      },
      /**
       * 部门筛选事件处理
       * @param value
       * @param data
       * @returns {boolean}
       */
      onTreeFilterNodeEvent (value, data) {
        if (!value) return true
        console.log(value)
        return data.fileName.indexOf(value) !== -1
      },
      /**
       * 选中某行事件处理
       * @param selection
       */
      onSelectRowEvent (selection) {
        this.selectRows = selection
        if (this.selectRows.length != 1) {
          this.operateBtn.editBtn = false
        } else {
          this.operateBtn.editBtn = true
        }
        if (this.selectRows.length >= 1) {
          this.operateBtn.delBtn = true
        } else {
          this.operateBtn.delBtn = false
        }
      },

      /**
       * 排序事件处理
       * @param col
       */
      onSortTableEvent (col) {
        this.queryParam.fixed = col.prop
        this.queryParam.sort = col.order == 'descending' ? 'desc' : 'asc'
        this.doSearchList()
      },
      onEditInputCaseEvent (row) {
        this.inputCaseModal.inputCaseDialogVisible = true
        this.inputCaseModal.inputCaseDialogText = JSON.stringify(row.inputCase)
        this.inputCaseModal.outputCaseDialogText = JSON.stringify(row.outputCase)
        this.inputCaseModal.oldOutputCaseDialogText = JSON.stringify(row.oldOutputCase)

      },
      onRefresh (isRefresh) {
        if (isRefresh) {
          this.doSearchList()
        }
      },
      /**
       * 选择文件事件处理
       * @param data
       * @param node
       * @param array
       */
      onSelectTreeEvent (data, node, array) {
        this.selectFilePath = data.filePath
        this.uploadData.uploadPath = data.filePath
        if (data.fileType == 'directory') {
          return
        }

        cmsResourceApi.readContent(data.filePath).then(msg => {
          this.$refs['codeEditor'].setText(msg.row)
          this.codeText = msg.row
        })
      },
      /**
       * 查询列表业务处理
       */
      doSearchList () {
        this.loading = true
        cmsTbContentApi.selectList(this.queryParam).then(msg => {
          setTimeout(() => {
            this.tableList = msg.rows
            this.tableTotal = msg.total
            this.queryParam.currentPage = msg.currentPage
            this.loading = false
          }, 200)
        }).catch(msg => {
          this.loading = false
        })
      },
      doLoadChildren (node, resolve) {
        console.log(node)
        if (node.level != 0 && node.data.fileType != 'directory') {
          console.log('文件')
          return resolve([])
        } else {
          cmsResourceApi.selectList({path: node.data.filePath}).then(msg => {
            for (let row of msg.rows) {
              row.isLeaf = false
            }
            console.log(msg.rows)
            resolve(msg.rows)
          }).catch(msg => {
            return resolve([])
          })
        }

      },
      doDeleteList (ids) {
        let data = {ids: ids}
        cmsTbContentApi.deleteListService(data).then(msg => {
          this.onRefresh(true)
        })
      },
      uploadSuccess (response, file, fileList) {
        this.$message(response.msg)
      }
    },
    computed: {},
    watch: {
      treeFilter (val) {
        this.$refs.tree.filter(val)
      }
    }
  }
</script>
<style>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
